<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            font-size: 12px;
            color: rgb(170, 169, 169);
            margin-right: 5px;
             padding-bottom: 2px;
             position: relative;
             top: -2px;
            
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .t1,.t2,.t3{
            width: 315px;
            height: 370px;
            
        }
       
        div{
            box-sizing: border-box;
        }
         .kuang{
             width: 1000px;
             height: 381px;
             margin: 100px auto;
             border: 15px solid #e7e7e7;
             display: flex;
             justify-content: space-between;
             background-color: #e7e7e7;
         }
         .header1{
             padding-top: 5px;
             height: 30px;
             width: 100%;
             background-image: linear-gradient(to right, rgb(250, 250, 250) , rgb(255, 168, 168));
         }
         .header2{
             padding-top: 5px;
             height: 30px;
             width: 100%;
             background-image: linear-gradient(to right, rgb(255, 255, 255) , rgb(174, 219, 255));
         }
         .wt{
             
             padding-left: 10px;
            
         }
         .orgg{
            border-left: 5px solid rgb(252, 74, 30);
            color:  rgb(252, 74, 30);
         }
         .re{
            border-left: 5px solid rgb(255, 0, 21);
            color:  rgb(255, 0, 21);
         }
         .blu{
            border-left: 5px solid rgb(65, 147, 255);
            color:  rgb(65, 147, 255);
         }
         .bj{
             /* padding-top: 10px; */
             /* margin-top: 10px; */
             margin-bottom: 10px;
             height: 100px;
             width: 100%;
             background-image: url(img/quan-bg.png);
         }
         .bj img{
             margin-top: 3px;
             padding-left: 5px;
             width: 95px;
             height: 95px;
         }
         .bj>div{
           float: left;
         }
         .lis{
             margin-top: 30px;
         }
         .money{
             margin-bottom: 10px;
         }
         .money1{
             font-size: 12px;
             margin-left: 10px;
         }
         .m{
             margin-left: 10px;
             padding-right: 10px;
         }
         .m1{
             font-size: 12px;
         }
         .org{
             color: rgb(233, 100, 39);
         }
         .hh2>div{
             margin-left: 1px;
             margin-bottom: 1px;
             float: left;
             width: 156px;
             height: 159px;
             background-color: rgb(255, 255, 255);
         }
         .hh2 div img{
            
           margin: 0 auto;
             height: 100px;
         }
         .hh2 div p{
             text-align: center;
         }
         .bsd{
             font-size: 13px;
             margin-bottom: 5px;
         }
         .donghua{
             margin-left: 30px;
             width: 100px;
             height: 100px;
             overflow: hidden;
         }
         .donghua1{
             margin-left: 30px;
             /* width: 100px;
             height: 100px; */
             overflow: hidden;
         }
         
         .jiantou{
             width: 15px;
             height: 15px;
             border-radius: 50%;
             margin-right: 5px;
         }
         .donghua img{
             width: 100px;
             height: 100px;
             transition: all 1s linear;
         }
         .donghua:hover img{
            transform: translateY(-100px);
         }   
        .dm{
            color: rgb(65, 147, 255);
        }
        .content1{
            background-color: #fff;
            
        }
    </style>
</head>
<body>
    <div class="kuang">
        <div class="fl t1">
            <div class="header1">
                  <span class="fl wt orgg">领券中心</span>
                  <span class="fr wl"><a href="">更多</a><img src="img/index.png" alt="" class="jiantou"></span>
            </div>
            <div class="content1">
                <div>
                    <div class="bj">
                        <div><img src="img/1.jpg" alt=""></div>
                        
                      <div class="lis">
                          <div class="money">
                              <span class="m org">¥45</span><span class="m1 org">满100用45</span> 
                          </div>
                          <div class="money1 org">
                              限自营佳佳自营旗舰店...
                          </div>
                          
                      </div>
                    </div>
                    <div class="bj"> <div><img src="img/2.jpg" alt=""></div>
                        
                    <div class="lis">
                        <div class="money">
                            <span class="m org">¥45</span><span class="m1 org">满100用45</span> 
                        </div>
                        <div class="money1 org">
                            限自营佳佳自营旗舰店...
                        </div>
                        
                    </div></div>
                    <div class="bj"> <div><img src="img/3.jpg" alt=""></div>
                        
                    <div class="lis">
                        <div class="money">
                            <span class="m org">¥45</span><span class="m1 org">满100用45</span> 
                        </div>
                        <div class="money1 org">
                            限自营佳佳自营旗舰店...
                        </div>
                        
                    </div></div>
                </div>
            </div>
           
        </div>
        <div class="fl t2">
            <div class="header1">
                <span class="fl wt re">苏宁Outlets</span>
                <span class="fr wl"><a href="">更多</a><img src="img/index.png" alt="" class="jiantou"></span>
            </div>
            <div class="content hh2">
                <div >
                    <div class="donghua">
                        <img src="img/4.webp" alt="">
                    <img src="img/a.webp" alt="">
                    </div>
                <p class="bsd">波司登</p>
                <p class="money1 org">今日特价8.8折</p>
                </div>
                <div> <div class="donghua">
                    <img src="img/6.webp" alt="">
                <img src="img/b.webp" alt="">
                </div> <p class="bsd">ASICS</p>
                    <p class="money1 org">大牌精选7.1折起</p></div>
                <div> <div class="donghua">
                    <img src="img/8.webp" alt="">
                <img src="img/c.webp" alt="">
                </div><p class="bsd">周大福</p>
                    <p class="money1 org">爆款直降8.2折起</p></div>
                <div> <div class="donghua">
                    <img src="img/10.webp" alt="">
                <img src="img/d.webp" alt="">
                </div> <p class="bsd">Peacebird太平鸟</p>
                    <p class="money1 org">限时抢购2.3折起</p></div>
            </div>
        </div>
        <div class="fl t3">
            <div class="header2">
                <span class="fl wt blu">人气好货</span>
                <span class="fr wl"><a href="">更多</a><img src="img/index.png" alt="" class="jiantou"></span>
            </div>
            <div class="content hh2">
                <div> <div class="donghua1">
                    <img src="img/12.webp" alt="">
                <img src="img/12.jpg" alt="">
                </div>
                <p class="bsd">百威经典啤酒</p>
                <p class="money1 dm"> 23人都说好</p>
                </div>
                <div> <div class="donghua1">
                    <img src="img/13.webp" alt="">
                <img src="img/13.jpg" alt="">
                </div><p class="bsd">可比克薯片组合</p>
                    <p class="money1 dm">今日特价8.8折</p></div>
                <div> <div class="donghua1">
                    <img src="img/14.webp" alt="">
                <img src="img/14.jpg" alt="">
                </div><p class="bsd">格力除湿器</p>
                    <p class="money1 dm">今日特价8.8折</p></div>
                <div> <div class="donghua1">
                    <img src="img/15.webp" alt="">
                <img src="img/15.jpg" alt="">
                </div> <p class="bsd">鱼跃儿童温度计</p>
                    <p class="money1 dm">今日特价8.8折</p></div>
            </div>
        </div>
    </div>
</body>
</html>